<template>
  <div class="viewContain">
    <el-form :model="listQuery" size="small" label-width="100px">
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="会员姓名 :">
            <el-input
              v-model="listQuery.username"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="手机号码 :">
            <el-input
              v-model="listQuery.mobile"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item v-if="isAdminRole === '1'" label="站点名称 :">
            <el-input
              v-model="listQuery.site"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item v-if="isAdminRole !== '1'" label="站点名称 :">
            <el-input
              v-model="listQuery.site"
              disabled
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label-width="20px">
            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
            <el-button size="mini" type="primary" plain @click="handleReload1">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="积分规则 :">
            <el-input
              v-model="memberPoints"
              disabled
              style="max-width:200px"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align:right;margin-bottom:10px">
      <el-button v-if="isAdminRole === '1'" size="mini" type="primary" @click="handleSetRule">设置规则</el-button>
    </div>
    <!-- 设置规则 -->
    <el-dialog
      :title="dialogTitle_set"
      :visible.sync="dialogFormVisible_set"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-form :model="formData_set" size="small" :rules="rules_set" label-width="left">
        <el-form-item label="积分规则 :" prop="point">
          <el-input v-model="formData_set.point" placeholder="请输入" clearable style="max-width:200px" />
        </el-form-item>
        <el-form-item label="更新时间 :" prop="createTime">
          <el-input v-model="formData_set.createTime" disabled clearable style="max-width:200px" />
        </el-form-item>
        <el-form-item label="提示 :">
          <span>1：100即100积分等值于1元</span>
        </el-form-item>
        <div style="text-align:center">
          <el-button size="mini" type="primary" plain @click="dialogFormVisible_set=false">取消</el-button>
          <el-button size="mini" type="primary" @click="handleSave_set">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 积分修正 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-form ref="formData" :model="formData" size="small" :rules="rules" label-width="120px">
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :xl="{ span: 24 }">
            <el-form-item label="手机号 :" prop="mobile">
              <el-input v-model="formData.mobile" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :xl="{ span: 24 }">
            <el-form-item label="修正积分数 :" prop="integration">
              <el-input v-model="formData.integration" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align:center">
          <el-button size="mini" type="primary" plain @click="dialogFormVisible=false">取消</el-button>
          <el-button size="mini" type="primary" @click="handleSave">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-table
      ref="table"
      v-loading="loading"
      fit
      stripe
      :data="tableData"
      border
      size="mini"
    >
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" align="center" label="会员姓名" />
      <el-table-column prop="mobile" align="center" label="手机号码" />
      <el-table-column prop="site" align="center" label="注册站点" />
      <el-table-column prop="integration" align="center" label="积分" />
      <el-table-column align="center" fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button class="text-button" size="mini" @click="handleDetail(scope.row.memberId, scope.row.mobile)">详情</el-button>
          <el-button v-if="isAdminRole === '1'" class="text-button" size="mini" @click="handleEditScore(scope.row.mobile)">积分修正</el-button>
          <el-button class="text-button" size="mini" @click="handleEditRecord(scope.row.memberId, scope.row.mobile)">修正记录</el-button>
          <el-button v-if="isAdminRole === '1'" class="text-button el-button--danger" size="mini" @click="handleDelete(scope.row.mobile)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { commonMixin } from '@v/mixin/commonMixin.js'
import ComApiUrl from '@a/comomApi.js'
import { setMemberPoints, getMemberPoints } from '@a/business/vip.js'
import { validNum1 } from '@u/validate'

export default {
  mixins: [commonMixin],
  data() {
    const validateNum = (rules, value, callback) => {
      if (!validNum1(value)) {
        callback(new Error('请输入大于等于0的数值!'))
      } else {
        callback()
      }
    }
    return {
      comApiUrlList: new ComApiUrl('/member/api/member/getMemberList'),
      comApiUrlDelete: new ComApiUrl('/member/api/member/delMemberDetail/'),
      comApiUrlUpdate: new ComApiUrl('/member/api/member/updateMember'),
      loading: false,
      dialogTitle: '积分修正',
      dialogTitle_set: '积分规则设置',
      dialogFormVisible: false,
      dialogFormVisible_set: false,
      memberPoints: '', // 积分规则初始渲染数据
      // 设置规则
      formData_set: {
        point: 100,
        userId: '',
        createTime: '' // 积分更新时间
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        site: '',
        mobile: ''
      },
      // 积分修正
      formData: {
        mobile: '',
        userId: ''
      },
      rules: {
        mobile: [
          { required: true, message: '', trigger: 'blur' }
        ],
        integration: [
          { required: true, message: '修正积分数不能为空!', trigger: 'blur' },
          { validator: validateNum, trigger: 'blur' }
        ]
      },
      rules_set: {
        point: [
          { required: true, message: '规则设置不能为空!', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '', trigger: 'blur' }
        ]
      },
      isAdminRole: '',
      orgName: '' // 站点名称
    }
  },
  mounted() {
    this.comFun()
  },
  methods: {
    async comFun() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      const { isAdminRole, orgName } = userInfo
      this.isAdminRole = isAdminRole
      isAdminRole === '1' ? this.listQuery.site = '' : this.listQuery.site = orgName
      this.formData.userId = userInfo.userId
      this.formData_set.userId = userInfo.userId
      await this.getList()
      await this.getMemberPoints()
    },
    // 设置规则
    handleSetRule() {
      this.dialogFormVisible_set = true
      this.getMemberPoints()
    },
    // 获取积分比例规则
    getMemberPoints() {
      getMemberPoints({}).then(res => {
        if (res.code === 0) {
          this.memberPoints = `1:${res.data.point}`
          this.formData_set.point = res.data.point
          this.formData_set.createTime = res.data.createTime
        }
      })
    },
    // 保存设置规则
    handleSave_set() {
      console.log(this.formData_set)
      setMemberPoints(this.formData_set).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.dialogFormVisible_set = false
          this.getMemberPoints()
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    // 详情
    handleDetail(memberId, mobile) {
      console.log(memberId)
      localStorage.setItem('memberPhone', mobile)
      this.$router.push('/business/vip/detail/' + memberId)
    },
    // 积分修正
    handleEditScore(mobile) {
      this.dialogFormVisible = true
      this.formData.mobile = mobile
    },
    // 修正记录
    handleEditRecord(memberId, mobile) {
      console.log(memberId)
      localStorage.setItem('memberPhone', mobile)
      this.$router.push('/business/vip/record/' + memberId)
    },
    // 确定修正积分
    handleSave() {
      this.$refs.formData.validate(valide => {
        valide ? this.update() : ''
      })
    },
    handleReload1() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        username: '',
        site: '',
        mobile: ''
      }
      this.comFun()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
